import React, { useState } from 'react'
import ReactDOM from 'react-dom'

const Statistics = (props) => {

  const good = props.good
  const neutral = props.neutral
  const bad = props.bad
  const all = good + neutral + bad
  const average = (good - bad)/all
  const positive = good/all

  if (all === 0) {
    return (
      <div>
        <h1>statistics</h1>
        <p>No given feedback</p>
      </div>
    )
  }

  return (
    <div>
      <h1>statistics</h1>
      <Statisticsline text="good" value={good} />
      <Statisticsline text="neutral" value={neutral} />
      <Statisticsline text="bad" value={bad} />
      <Statisticsline text="all" value={all} />
      <Statisticsline text="average" value={average} />
      <Statisticsline text="positive" value={positive} />
    </div>
  )
}

const Button = (props) => {
  return (
    <button onClick={props.handleClick}>{props.text}</button>
  )
}

const Statisticsline = (props) => {
  return (
    <tr>
      <td>{props.text}</td>
      <td>{props.value}</td>
    </tr>
  )
}

const App = () => {
  // save clicks of each button to own state
  const [good, setGood] = useState(0)
  const [neutral, setNeutral] = useState(0)
  const [bad, setBad] = useState(0)

  const handleGoodClick = () => setGood(good+1)
  const handleNeutralClick = () => setNeutral(neutral+1)
  const handleBadClick = () => setBad(bad+1)

  return (
    <div>
      <h1>give feedback</h1>
      <Button handleClick={handleGoodClick} text="good"/>
      <Button handleClick={handleNeutralClick} text="neutral"/>
      <Button handleClick={handleBadClick} text="bad"/>
      <Statistics good={good} neutral={neutral} bad={bad}/>
    </div>
  )
}

ReactDOM.render(<App />, 
  document.getElementById('root')
)
